<template>
  <canvas ref="canvas" @click="handleClick"></canvas>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted, onBeforeUnmount } from 'vue';

export default defineComponent({
  name: 'InteractiveBackground',
  setup() {
    const canvas = ref<HTMLCanvasElement | null>(null);
    let ctx: CanvasRenderingContext2D | null = null;
    let w: number;
    let h: number;
    let particles: { x: number; y: number; radius: number; color: string; speedX: number; speedY: number }[] = [];

    const createParticles = (count: number) => {
      for (let i = 0; i < count; i++) {
        particles.push({
          x: Math.random() * w,
          y: Math.random() * h,
          radius: Math.random() * 5 + 2,
          color: `hsl(${Math.random() * 360}, 100%, 50%)`,
          speedX: (Math.random() - 0.5) * 2,
          speedY: (Math.random() - 0.5) * 2,
        });
      }
    };

    const drawParticles = () => {
      particles.forEach(p => {
        ctx!.beginPath();
        ctx!.arc(p.x, p.y, p.radius, 0, Math.PI * 2);
        ctx!.fillStyle = p.color;
        ctx!.fill();
        ctx!.closePath();
      });
    };

    const updateParticles = () => {
      particles.forEach(p => {
        p.x += p.speedX;
        p.y += p.speedY;

        // 边界反弹
        if (p.x < 0 || p.x > w) p.speedX *= -1;
        if (p.y < 0 || p.y > h) p.speedY *= -1;
      });
    };

    const loop = () => {
      ctx!.clearRect(0, 0, w, h);
      updateParticles();
      drawParticles();
      requestAnimationFrame(loop);
    };

    const resizeCanvas = () => {
      w = canvas.value!.width = window.innerWidth;
      h = canvas.value!.height = window.innerHeight;
    };

    // 点击处理函数
    const handleClick = (event: MouseEvent) => {
      const rect = canvas.value!.getBoundingClientRect();
      const clickX = event.clientX - rect.left;
      const clickY = event.clientY - rect.top;

      particles.forEach(p => {
        const dist = Math.hypot(p.x - clickX, p.y - clickY);
        if (dist < p.radius) {
          // 点击到粒子，改变颜色，并产生新的粒子效果
          p.color = `hsl(${Math.random() * 360}, 100%, 50%)`;
          createExplosion(p.x, p.y);
        }
      });
    };

    // 点击粒子时产生爆炸效果
    const createExplosion = (x: number, y: number) => {
      for (let i = 0; i < 10; i++) {
        particles.push({
          x: x,
          y: y,
          radius: Math.random() * 3 + 1,
          color: `hsl(${Math.random() * 360}, 100%, 50%)`,
          speedX: (Math.random() - 0.5) * 4,
          speedY: (Math.random() - 0.5) * 4,
        });
      }
    };

    onMounted(() => {
      if (canvas.value) {
        ctx = canvas.value.getContext('2d');
        resizeCanvas();
        createParticles(100); // 创建100个粒子
        loop();
      }
    });

    onBeforeUnmount(() => {
      // 清理事件或其他操作
    });

    window.addEventListener('resize', resizeCanvas);

    return {
      canvas,
      handleClick,
    };
  },
});
</script>

<style scoped>
canvas {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
}
</style>
